<template>
  <div>
    <div class="statistics-div">
      <el-card>
        <div class="info-div">
          <div class="left-img-div">
            <img :src="imgUrl1" alt="" class="left-img" />
          </div>
          <div class="right-div">
            <p>实体总数</p>
            <avue-count-up
              :end="totleObj.entityTotal"
              style="font-size: 28px; font-weight: bold; color: #222"
            ></avue-count-up>
          </div>
        </div>
      </el-card>
      <el-card>
        <div class="info-div">
          <div class="left-img-div">
            <img :src="imgUrl2" alt="" class="left-img" />
          </div>
          <div class="right-div">
            <p>事件总数</p>
            <avue-count-up
              :end="totleObj.eventTotal"
              style="font-size: 28px; font-weight: bold; color: #222"
            ></avue-count-up>
          </div>
        </div>
      </el-card>
      <el-card>
        <div class="info-div">
          <div class="left-img-div">
            <img :src="imgUrl3" alt="" class="left-img" />
          </div>
          <div class="right-div">
            <p>关系总数</p>
            <avue-count-up
              :end="totleObj.relationTotal"
              style="font-size: 28px; font-weight: bold; color: #222"
            ></avue-count-up>
          </div>
        </div>
      </el-card>
    </div>

    <div class="chart-div">
      <div class="chart-item">
        <div class="chart-item-head">
          <p>实体类型</p>
          <p><span></span>数量</p>
        </div>
        <chartCom
          :id="ids.id1"
          :chartData="entityObj"
          :color="'rgba(68,160,246,0.85)'"
        ></chartCom>
      </div>
      <div class="chart-item">
        <div class="chart-item-head">
          <p>事件类型</p>
          <p><span class="green"></span>数量</p>
        </div>
        <chartCom
          :id="ids.id2"
          :chartData="eventObj"
          :color="'#5BD9A7'"
        ></chartCom>
      </div>
      <div class="chart-item">
        <div class="chart-item-head">
          <p>关系类型</p>
          <p><span class="orange"></span>数量</p>
        </div>
        <chartCom
          :id="ids.id3"
          :chartData="relationObj"
          :color="'#FF9F4E'"
        ></chartCom>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ontology } from "@/api/statisticsKg/analysis";
import { ref, onMounted } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import imgUrl1 from "@/assets/icons/icon_zstj_shiti_fill@2x.png";
import imgUrl2 from "@/assets/icons/icon_zstj_shijian_fill@2x.png";
import imgUrl3 from "@/assets/icons/icon_zstj_guanxi_fill@2x.png";
import chartCom from "./components/chart.vue";

const ids = ref({
  id1: "entity",
  id2: "event",
  id3: "relationship",
});
let entityObj = ref({
  yData: [],
  data: [],
});
let eventObj = ref({
  yData: [],
  data: [],
});
let relationObj = ref({
  yData: [],
  data: [],
});
let totleObj = ref({
  entityTotal: 0,
  eventTotal: 0,
  relationTotal: 0,
});

onMounted(() => {
  initData();
});

const initData = () => {
  ontology().then((res) => {
    totleObj.value.entityTotal = res.data.entityTotal;
    totleObj.value.eventTotal = res.data.eventTotal;
    totleObj.value.relationTotal = res.data.relationTotal;

    let [
      entityData,
      entityYData,
      eventData,
      eventYData,
      relationData,
      relationYData,
    ] = [[], [], [], [], [], []];
    res.data.entitySortTopN.forEach((element) => {
      // 处理本体统计数据
      entityData.push(element.count);
      entityYData.push(element.name);
    });
    res.data.eventSortTopN.forEach((element) => {
      // 处理事件统计数据
      eventData.push(element.count);
      eventYData.push(element.name);
    });
    res.data.relationSortTopN.forEach((element) => {
      // 处理关系统计数据
      relationData.push(element.count);
      relationYData.push(element.name);
    });

    entityObj.value.data = entityData;
    entityObj.value.yData = entityYData;
    eventObj.value.data = eventData;
    eventObj.value.yData = eventYData;
    relationObj.value.data = relationData;
    relationObj.value.yData = relationYData;
  });
};
</script>

<style scoped lang="scss">
.statistics-div {
  display: flex;
  justify-content: space-between;
  height: 150px;
  margin-top: 18px;

  ::v-deep .el-card {
    width: 30%;

    .el-card__body {
      height: 100%;
      padding: 0;
    }

    .info-div {
      display: flex;
      align-items: center;
      height: 100%;
      border-radius: 5px;
    }

    .left-img-div {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 33%;
      height: 100%;
      margin-right: 24px;
      background: #f7f8fa;
      border-radius: 5px 0 0 5px;

      .left-img {
        width: 60px;
        height: 60px;
      }
    }

    .right-div {
      p:nth-child(1) {
        margin-bottom: 10px;
        font-size: 18px;
        color: #7f8a9b;
      }
    }
  }
}

.chart-div {
  display: flex;
  justify-content: space-between;
  height: calc(100vh - 400px);
  min-height: 500px;
  margin-top: 30px;

  .chart-item {
    width: 30%;
    padding: 24px;
    border: 1px solid #dcdde2;
    border-radius: 4px;

    .chart-item-head {
      // display: flex;
      // justify-content: space-between;
      width: 90%;
      margin: 0 auto 10px;
      font-size: 15px;

      p:nth-child(1) {
        font-size: 18px;
        font-weight: bold;
        color: #1a1b1d;
      }

      p:nth-child(2) {
        margin: 10px 0 18px;
        font-size: 12px;
        color: #7f8a9b;
        text-align: right;

        span {
          display: inline-block;
          width: 8px;
          height: 8px;
          margin-right: 4px;
          background: rgb(68 160 246 / 85%);
        }

        .orange {
          background: #ff9f4e;
        }

        .green {
          background: #5bd9a7;
        }
      }
    }
  }
}
</style>
